import React, {Component, Fragment} from 'react'
import {Table, Button, Popconfirm, message} from 'antd'
import {Link} from 'react-router-dom'
import {post, moment} from '../../common/js/utils'
import MiniPlayer from '../../component/mini_player'
import {MovieEdit} from '../../component/movie_edit'

export default class AdminTable extends Component {

  state = {
    loading: false,
    columns: [{
      align: 'center',
      title: '海报',
      dataIndex: 'poster',
      render: (text, record) => (
        <img
          onClick={e => this.player.showModal(record)}
          src={text}
          alt={record.title}
          title={record.title}
          width="120"
          style={{
            cursor: 'pointer'
          }}
        />
      )
    }, {
      align: 'center',
      title: '名字',
      dataIndex: 'title',
      render: (text, record) => (
        <Link to={`/detail/${record._id}`} title={text} >{text}</Link>
      )
    }, {
      align: 'center',
      title: '类型',
      dataIndex: 'movieTypes',
      render: (text, record) => (
        text.map((item, key) => (
          <p key={key} >{item}</p>
        ))
      )
    }, {
      align: 'center',
      title: '上映时间',
      dataIndex: 'pubdate',
      render: (text, record) => (
        <p>{moment(text).format('YYYY-MM')}</p>
      )
    }, {
      align: 'center',
      title: '地区',
      dataIndex: 'countries',
      render: (text, record) => (
        text.map((item, key) => (
          <p key={key} >{item}</p>
        ))
      )
    }, {
      align: 'center',
      title: '更新时间',
      dataIndex: 'meta.updatedAt',
      render: (text, record) => (
        <p>{moment(text).fromNow(true)} 前</p>
      )
    }, {
      title: '简介',
      dataIndex: 'summary',
      render: (text, record) => (
        <p style={{
          maxWidth: '500px',
          padding: '5px'
        }} >{text}</p>
      )
    }, {
      align: 'center',
      title: '操作',
      dataIndex: 'edit',
      render: (text, record) => (
        <Fragment>
          <MovieEdit
            detail={record}
            onSuccess={this.props.refresh}
          >
            <Button style={{margin: 5}} type="primary">编辑</Button>
          </MovieEdit>
          <Popconfirm placement="left" title={`删除后不可恢复，确定？`} onConfirm={e => this.deleteMovie(record)} okText="确定" cancelText="取消" >
            <Button style={{margin: 5}} type="danger" >删除</Button>
          </Popconfirm>
        </Fragment>
      )
    }]
  }

  deleteMovie = async (item) => {
    let res = await post('/api/admin/delMv', {
      _id: item._id
    })
    if (res.result === 1) {
      message.success('删除成功！')
      this.props.refresh && this.props.refresh()
    } else {
      message.error(res.mes)
    }
  }

  render() {
    const {dataSource} = this.props
    const {columns} = this.state

    if (!dataSource.length) return null

    return (
      <div>
        <Table
          rowKey="_id"
          dataSource={dataSource}
          columns={columns}
          pagination={false}
        />
        <MiniPlayer onRef={c => this.player = c} />
      </div>
    )
  }

}